<div class="jumbotron" style="color: #444">
	<h3>Import Finalministry XML</h3>
	<h4>TODO</h4>
	<p>
		<img src="http://upload.wikimedia.org/wikipedia/en/thumb/b/b1/Keyhole_Markup_Language.png/220px-Keyhole_Markup_Language.png" />
	</p>
	<p>Import a entire congregation from a finalministry XML file.</p>
	<p>
	<div class="input-group">
		<form enctype="multipart/form-data" id="#fmFilePostForm">
			<input type="file" class="btn btn-primary form-control" name="fmXmlFile" id="fmXmlFile" style="color: #444;" />
			<input>
			<div class="input-group-btn"></div>
		</form>
		<button class="btn btn-primary" id="buttonSubmitImportFM">Import Finalministry XML</button>
	</div>
	</p>
	<p>
	<div id="importResultFinalministryXml"></div>
	</p>
</div>

<div class="jumbotron" style="color: #444">
	<h3>Import CSV</h3>
	<p>
		<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/CsvDelimited001.svg/200px-CsvDelimited001.svg.png" />
	</p>
	<p>CSV is a common, relatively simple file format. Microsoft Excel will open .csv files. OpenOffice.org Calc and LibreOffice Calc handle CSV files and pasted text with a Text Import dialog asking the user to manually specify the delimiters, encoding, format of columns, etc.</p>
</div>

<div class="jumbotron" style="color: #444">
	<h3>Import Ministry Assistant Backup Files</h3>
	<p>
		<img src="#HOME#/icons/ministryAssistantLogo.png" />
	</p>
</div>

<div class="jumbotron" style="color: #444">
	<h3>Import OpenStreetMap OSM</h3>
	<p>
		<img src="#HOME#/icons/OSM-Logo.png" />
	</p>
	<p>Import OpenStreetMaps in order for Finalministry to create automatic maps.</p>
	<p>
	<div class="input-group">
		<form enctype="multipart/form-data" id="#osmForm">
			<input type="file" class="btn btn-primary form-control" name="fmXmlFile" id="fmXmlFile" style="color: #444;" />
			<div class="input-group-btn"></div>
		</form>
		<button class="btn btn-primary" id="buttonSubmitOSM">Import OSM</button>
	</div>
	</p>
	<p>
	<div id="importResultOSM"></div>
	</p>
</div>

<script type="text/javascript">
	$(document).ready(
			function() {
				$('body').on(
						'click',
						'.upload',
						function() {
							// Get the form data. This serializes the entire form. pritty easy huh!
							var form = new FormData($('#fmFilePostForm')[0]);

							// Make the ajax call
							$.ajax({
								url : 'import/finalministry/',
								type : 'POST',
								xhr : function() {
									var myXhr = $.ajaxSettings.xhr();
									if (myXhr.upload) {
										myXhr.upload.addEventListener(
												'progress', progress, false);
									}
									return myXhr;
								},
								//add beforesend handler to validate or something
								//beforeSend: functionname,
								success : function(res) {
									$('#importResultFinalministryXml').html(res);
								},
								//add error handler for when a error occurs if you want!
								//error: errorfunction,
								data : form,
								// this is the important stuf you need to overide the usual post behavior
								cache : false,
								contentType : false,
								processData : false
							});
						});
			});

	// Yes outside of the .ready space becouse this is a function not an event listner!
	function progress(e) {
		if (e.lengthComputable) {
			//this makes a nice fancy progress bar
			$('progress').attr({
				value : e.loaded,
				max : e.total
			});
		}
	}

	$("#fmXmlFile").change(function(event) {
		if ($("#fmXmlFile").val() != null) {
			$("#buttonSubmitImportFM").removeClass("btn-primary");
			$("#buttonSubmitImportFM").removeClass("btn-warning");
			$("#buttonSubmitImportFM").addClass("btn-success");

			$("#importResultFinalministryXml").html("");

		} else {
			$("#buttonSubmitImportFM").removeClass("btn-primary");
			$("#buttonSubmitImportFM").addClass("btn-warning");
		}
	});

	$("#buttonSubmitImportFM")
			.click(
					function(event) {

						console.log('Upload via AJAX');

						if ($("#fmXmlFile").val() == "") {
							var errorMessage = '<h2><span class="label label-danger">No filename specified!</span></h2>';
							$("#importResultFinalministryXml").html(
									errorMessage);
							$("#buttonSubmitImportFM").removeClass(
									"btn-primary");
							$("#buttonSubmitImportFM").addClass("btn-warning");
							return false;
						} else {

							// Serialize the form data
							// 							var formData = $("#fmFilePostForm").serialize();
							// 							$("#importResultFinalministryXml").html(
							// 									"TEST:<br/>" + formData);

							// Send data with ajax
							/*$.ajax({
								url : 'import/finalministry/'
										+ $("#fmXmlFile").val(),
								type : 'POST',
								cache : false,
								contentType : false,
								processData : false,
								mimeType : "multipart/form-data",
								data : formData,
								success : function(data) {

									$("#importResultFinalministryXml").html(
											data);
								}
							});*/

							return false;
						}
					});
</script>